<script setup lang="ts">
import { reactive, watch } from 'vue';
import { RoleDataScopeOptions } from '@/constants/business';
import { $t } from '@/locales';
import { fetchGetRoleInfo, fetchUpdateRoleDataScope } from '@/service/api';
import { useCopyProperties, useNaiveForm } from '@/hooks/common/form';

defineOptions({
  name: 'DataScopeModal'
});

interface Props {
  /** the roleId */
  roleId: number;
}

const props = defineProps<Props>();

const visible = defineModel<boolean>('visible', {
  default: false
});

function closeModal() {
  visible.value = false;
}

// type ButtonConfig = {
//   id: number;
//   label: string;
//   code: string;
// };

const { formRef } = useNaiveForm();

// const tree = shallowRef<ButtonConfig[]>([]);

// async function getAllButtons() {
//   // request
//   tree.value = [
//     { id: 1, label: 'button1', code: 'code1' },
//     { id: 2, label: 'button2', code: 'code2' },
//     { id: 3, label: 'button3', code: 'code3' },
//     { id: 4, label: 'button4', code: 'code4' },
//     { id: 5, label: 'button5', code: 'code5' },
//     { id: 6, label: 'button6', code: 'code6' },
//     { id: 7, label: 'button7', code: 'code7' },
//     { id: 8, label: 'button8', code: 'code8' },
//     { id: 9, label: 'button9', code: 'code9' },
//     { id: 10, label: 'button10', code: 'code10' }
//   ];
// }

// const checks = shallowRef<number[]>([]);

// async function getChecks() {
//   console.log(props.roleId);
//   // request
//   checks.value = [1, 2, 3, 4, 5];
// }

type Model = Pick<Api.System.Role, 'id' | 'roleName' | 'roleKey' | 'dataScope'>;

const model: Model = reactive({
  id: null,
  roleName: '',
  roleKey: '',
  datascope: '1'
});

async function handleSubmit() {
  // request
  const { error } = await fetchUpdateRoleDataScope(model as Api.System.RoleEditModel);
  if (!error) {
    window.$message?.success?.($t('common.modifySuccess'));

    closeModal();
  }
}

async function init() {
  const { error, data } = await fetchGetRoleInfo(props.roleId);
  if (!error) {
    Object.assign(model, useCopyProperties(data, 'id', 'roleName', 'roleKey', 'dataScope'));
  }
}

watch(visible, val => {
  if (val) {
    init();
  }
});
</script>

<template>
  <NModal v-model:show="visible" title="分配数据权限" preset="card" class="w-480px">
    <NForm ref="formRef" :model="model">
      <NFormItem label="角色名称" path="roleName">
        <NInput v-model:value="model.roleName" disabled />
      </NFormItem>
      <NFormItem label="角色编码" path="roleKey">
        <NInput v-model:value="model.roleKey" disabled />
      </NFormItem>
      <NFormItem label="权限范围" path="datascope">
        <NSelect v-model:value="model.dataScope" :options="RoleDataScopeOptions" />
      </NFormItem>
    </NForm>
    <template #footer>
      <NSpace justify="end">
        <NButton size="small" class="mt-16px" @click="closeModal">
          {{ $t('common.cancel') }}
        </NButton>
        <NButton type="primary" size="small" class="mt-16px" @click="handleSubmit">
          {{ $t('common.confirm') }}
        </NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
